<template>
  <div class="home-page">
    <h1>猫娘对话</h1>

    <!-- 输入区域 -->
    <div class="input-container">
      <el-input
          v-model="userInput"
          placeholder="请输入问题..."
          type="textarea"
          :rows="2"
          :autosize="{ minRows: 2, maxRows: 5 }"
          @keyup.enter="sendMessage"
      ></el-input>
      <el-button
          :loading="loading"
          @click="sendMessage"
          :disabled="!userInput.trim() || loading"
          type="primary"
          icon="el-icon-paper-plane"
      >
        发送
      </el-button>
    </div>

    <!-- 对话历史 -->
    <div class="chat-history">
      <div v-for="(message, index) in chatMessages" :key="index"
           :class="['message-item', message.type === 'user' ? 'user-message' : 'ai-message']">
        <div class="avatar">
          <i class="el-icon-user" v-if="message.type === 'user'"></i>
          <i class="el-icon-robot" v-else></i>
        </div>
        <div class="content">
          <div class="message-content" v-html="message.content"></div>
          <div class="timestamp">{{ message.timestamp }}</div>
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-if="loading" class="loading-indicator">
        <el-skeleton animated />
      </div>

      <!-- 调试信息 - 开发环境显示 -->
      <!--      <div v-if="debugInfo" class="debug-info">-->
      <!--        <pre>{{ debugInfo }}</pre>-->
      <!--      </div>-->
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { askApi } from "@/api/ask.js";

const userInput = ref('')
const chatMessages = ref([])
const loading = ref(false)
const debugInfo = ref(null) // 用于存储调试信息

// 发送消息到AI并获取回复
const sendMessage = async () => {
  const input = userInput.value.trim()
  if (!input || loading.value) return

  // 添加用户消息到聊天历史
  const userMessage = {
    type: 'user',
    content: input,
    timestamp: new Date().toLocaleTimeString()
  }
  chatMessages.value.push(userMessage)
  userInput.value = ''

  try {
    loading.value = true
    debugInfo.value = null // 清空之前的调试信息

    // 调用API
    const response = await askApi(input)

    // 存储完整的API响应用于调试
    debugInfo.value = {
      request: input,
      response: JSON.parse(JSON.stringify(response, null, 2)) // 深拷贝并格式化
    }

    console.log('API响应:', response)

    // 智能解析API返回的数据
    let aiContent = parseApiResponse(response)

    // 添加AI回复到聊天历史
    const aiMessage = {
      type: 'ai',
      content: aiContent,
      timestamp: new Date().toLocaleTimeString()
    }
    chatMessages.value.push(aiMessage)

  } catch (error) {
    console.error('API请求失败:', error)

    // 存储错误信息用于调试
    debugInfo.value = {
      error: error.message,
      stack: error.stack
    }

    // 添加错误消息
    chatMessages.value.push({
      type: 'ai',
      content: '抱歉，请求过程中发生错误。',
      timestamp: new Date().toLocaleTimeString()
    })
  } finally {
    loading.value = false
  }
}

// 智能解析API响应
const parseApiResponse = (response) => {
  // 检查常见的数据结构
  if (response?.data?.content) return response.data.content
  if (response?.data?.answer) return response.data.answer
  if (response?.data?.result) return response.data.result
  if (response?.data) return JSON.stringify(response.data, null, 2)
  if (typeof response === 'string') return response

  // 如果都没有，返回完整响应的JSON字符串
  return '无法解析响应数据，请查看调试信息。'
}
</script>

<style scoped>
.home-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.input-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.chat-history {
  height: 500px;
  overflow-y: auto;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 15px;
  background-color: #f5f7fa;
}

.message-item {
  display: flex;
  margin-bottom: 15px;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.user-message .avatar {
  background-color: #409eff;
}

.ai-message .avatar {
  background-color: #67c23a;
}

.content {
  flex: 1;
}

.message-content {
  background-color: white;
  padding: 10px 15px;
  border-radius: 4px;
  display: inline-block;
  max-width: 80%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.user-message .message-content {
  background-color: #e6f7ff;
}

.timestamp {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
  margin-left: 10px;
}

.loading-indicator {
  margin-top: 15px;
}

.debug-info {
  margin-top: 15px;
  padding: 10px;
  background-color: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 4px;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
}
</style>